<template>
	<view style="padding-bottom: 120rpx;">
		<uni-table ref="info" border stripe type="selection" emptyText="暂无数据" @selection-change="selectionChange">
			<uni-tr class="title">
				<uni-th width="130">备料任务表</uni-th>
				<uni-th width="100">线体</uni-th>
				<uni-th width="100">任务绑定状态</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in orderList" :key="index" class="td-container">
				<uni-td width="130">{{ item.order }}</uni-td>
				<uni-td width="100">{{ item.line }}</uni-td>
				<uni-td width="100">
					{{ item.bindStatus === 0 ? '未绑定' : '已绑定' }}
<!-- 					<u-tag v-if="item.bindStatus === 0" text="未绑定" plain type="primary" />
					<u-tag v-else="item.bindStatus === 0" text="已绑定" plain type="success" /> -->
				</uni-td>
			</uni-tr>
		</uni-table>
		<view class="commonButton">
			<u-button type="primary" :disabled="includes.length === 0" @click="bindMission">绑定任务</u-button>
			<u-button type="warning" :disabled="orderListShow.length === 0" @click="unBindMission">解绑已绑任务</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-notify ref="uNotify"></u-notify>
		<!-- 表单 -->
		<u-modal
			:show="show"
			:title="title"
			showCancelButton
			confirmText='确定'
			cancelText='取消'
			confirmColor='#3c9cff'
			cancelColor='#f56c6c'
			:closeOnClickOverlay="false"
			@confirm="submitConfim"
			@cancel="submitCancel"
		>
			<view style="width: 100%;max-height: 500rpx;overflow-y: auto;">
				<checkbox-group @change="handlerClickOrder">
					<u-cell :title="item.order" v-for="(item, index) in orderListShow" :class="index === orderListShow.length - 1 ? 'lastRow' : ''" :key="index" style="height: 100rpx;">
						<view slot="value">
							<label>
								<checkbox :value="'order' + index" :checked="item.isChecked" />
							</label>
						</view>
					</u-cell>
				</checkbox-group>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { getOrderListAPI, bindMissionAPI, submitUnBindAPI, alreadyBindOrderAPI } from '@/api/work/outbound'
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				orderList: [],
				includes: [],
				show: false,
				title: '已绑定订单号',
				orderListShow: []
			};
		},
		computed: {
			...mapState(['macAddress'])
		},
		mounted() {
			this.getOrderList()
			this.alreadyBindOrder()
		},
		methods: {
			async alreadyBindOrder() {
				const submitForm = {
					url: this.macAddress
				}
				const res = await alreadyBindOrderAPI(submitForm)
				if (res.code === 200) {
					this.orderListShow = res.data.map(item => {
						return {
							order: item,
							isChecked: false
						}
					})
				} else {
					this.orderListShow = []
				}
			},
			handlerClickOrder(e) {
				// console.log(e.detail.value)
				// if (e.detail.value.length > 0) {
				// 	const list = e.detail.value.map(item => {
				// 		return Number(item.split('order')[1])
				// 	})
				// 	list.forEach(index => {
				// 		if (this.orderListShow[index].isChecked === false) {
				// 			this.orderListShow[index].isChecked = true
				// 		}
				// 	})
				// } else {
				// 	this.orderListShow.forEach(item => {
				// 		item.isChecked = false
				// 	})
				// }
				this.orderListShow.forEach(item => {
				  item.isChecked = false
				});
				
				// 如果 e.detail.value 不为空，再把匹配的设为 true
				if (e.detail.value && e.detail.value.length) {
				  const list = e.detail.value.map(item => Number(item.split('order')[1]))
				  list.forEach(index => {
				    if (index >= 0 && index < this.orderListShow.length) {
				      this.orderListShow[index].isChecked = true
				    }
				  });
				}
			},
			async getOrderList() {
				const res = await getOrderListAPI({
				  url: this.macAddress
				})
				if (res.code === 200) {
					this.orderList = res.data
				}
			},
			async bindMission() {
				// if (this.orderList.length === 0) {
				// 	return this.$refs.uToast.show({
				// 		type: 'warning',
				// 		message: '当前无任务列表'
				// 	})
				// }
				const preparationOrderCodeList = this.includes.map(index => this.orderList[index].order)
				const submitForm = {
				  // preparationOrderCodes: this.includes.length > 0 
				  //   ? this.includes.map(index => this.orderList[index]) 
				  //   : (this.orderList.length > 10 ? this.orderList.slice(0, 10) : this.orderList),
					preparationOrderCodes: preparationOrderCodeList,
				  url: this.macAddress
				}
				const res = await bindMissionAPI(submitForm)
				if (res.code === 200) {
					this.getOrderList()
					this.alreadyBindOrder()
					this.includes = []
					this.$refs.info.clearSelection()
					this.$refs.uToast.show({
						type: 'success',
						message: '绑定成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			selectionChange(e) {
				this.includes = e.detail.index
			},
			submitUnBind() {
			},
			async submitConfim() {
				const result = this.check()
				if (!result) {
					return this.$refs.uNotify.show({
						type: 'warning',
						message: '请勾选需要解绑的订单号',
						duration: 3000,
						color: '#fff'
					})
				}
				const submitForm = {
					bos: this.orderListShow,
					url: this.macAddress
				}
				const res = await submitUnBindAPI(submitForm)
				if (res.code === 200) {
					this.show = false
					// this.orderListShow = []
					this.getOrderList()
					this.alreadyBindOrder()
					this.includes = []
					this.$refs.info.clearSelection()
					this.$refs.uToast.show({
						type: 'success',
						message: '解绑成功'
					})
				} else {
					this.show = false
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async unBindMission() {
				this.show = true
				const submitForm = {
				  macUrl: this.macAddress
				}
				const res = await submitUnBindAPI(submitForm)
				if (res.code === 200) {
					this.getOrderList()
					this.alreadyBindOrder()
					this.$refs.uToast.show({
						type: 'success',
						message: '解绑成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			check() {
				const flag = this.orderListShow.some(item => item.isChecked === true)
				if (flag) {
					return true
				} else {
					return false
				}
			},
			submitCancel() {
				this.show = false
				this.orderListShow.forEach(item => {
					item.isChecked = false
				})
			},
			submitUnBind() {
				this.show = true
			},
		}
	}
</script>

<style lang="scss">
.commonButton {
	width: 100%;
	display: flex;
	gap: 20rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 15rpx;
	justify-content: space-between;
	background-color: #fff;
	z-index: 999 !important;
}

::v-deep .lastRow .u-line {
	display: none !important;
}


// .title {
// 	::v-deep uni-view.checkbox__inner {
// 		display: none !important;
// 	}
// }
::v-deep uni-view.u-modal__content {
	padding: 0 !important;
}
</style>
